{% extends "./inc/appbase.html" %}
{%block style%}
<style>
    .original {
        border: 1px solid #999;
        font-size: 10px !important;
        border-radius: 4px;
        line-height: 14px;
        width: 30px;
        color: #505050;
        text-align: center;
        margin-right: 5px;
        top: -2px;
        position: relative;
    }
    .price {
        color: #e4393c;
        font-size: 16px;
    }
    .mui-bar-tab .mui-tab-item.mui-active {
        color: #929292;
    }
    .softhide{
        display: none!important;
    }
    .mui-content-padded .iconfont {
        margin: 3px;
        display: inline-block;
        text-align: center;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 100px;
        background-clip: padding-box;
    }
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
    {% if controller.cart.data|length > 0 %}
    <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right btn-edit" data-hide="1">编辑</button>
    {%endif%}
</header>

{% if controller.cart.data|length > 0 %}
<nav class="mui-bar mui-bar-tab">
    <div class="mui-tab-item mui-checkbox" style="width: 2px;" >
        <input type="checkbox" id="checkAll" class="mui-icon" style="top:2px;left: 10px; z-index: 999">
        <span class="mui-tab-label" style="text-align: left; padding-left: 14px;margin-top: 23px">全选</span>
    </div>

    <div class="mui-tab-item subinfo" style="width: 7px;text-align: right;padding-right: 5px">
        <div class="size-14 mui-icon" style="width: 100%; color: #e4393c;"> <strong>总计: ¥<span
                class="color-danger size-14" id="total">0.00</span> </strong></div>
        <div class="size-12 color-gray">(不含运费，已优惠<span>¥0.00</span>)</div>

    </div>



    <a class="mui-tab-item sendfrom submit"   style="width: 4px; background-color: #f23030;color: #fff">

        <span class="mui-tab-label">去结算</span><span class="size-12 ">(<span class="nums">0</span>件)</span>
    </a>
    <a class="mui-tab-item delall edit softhide"   style="width: 4px; background-color: #f23030;color: #fff">

        <span class="mui-tab-label">删除选中</span>
    </a>
    <a class="mui-tab-item  edit softhide"   style="width: 4px; background-color: #007aff;color: #fff">

        <span class="mui-tab-label">移至收藏</span>
    </a>

</nav>
<div class="mui-content">
    <form class="cart-tbody form-cart" action="/center/cart/getorderinfo" method="post" >
        <ul class="mui-table-view ">
            {% for val in controller.cart.data%}
            <li class="mui-table-view-cell  mui-left ">
                <div class="mui-checkbox "  style="width: 28px;height: 28px; top:30%;left: 30px; position: absolute"><input name="ids" type="checkbox" value="{{val.product_id}}{%if val.type%}||{{val.type}}{%endif%}" data-val="{{val.product_id}}{%if val.type%}||{{val.type|urlencode}}{%endif%}"></div>
                <div style="margin-left: 25px">

                    <img class="mui-media-object mui-pull-left" src="{{val.pic}}" style="min-width: 80px;height: 80px">
                    <div class="mui-media-body">
                        <span class="mui-ellipsis-2 size-14">{{val.title}}</span>
                        <p class="mui-h6 mui-ellipsis">{% if val.type%}
                            <small>{{val.type}}</small>
                            {%endif%}</p>
                        <p class=""><span class="price" data-price ="{{val.price}}" >¥{{val.unit_price|formatCurrency}}</span> <span class="stock">{%if val.stock > 0%}<span class="original">有货</span> {%else%}<span class="original">无货</span>{%endif%}</span></p>
                        <div class="mui-numbox margin-top-3" data-numbox-min='1' >
                            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                            <input class="mui-input-numbox number" type="number" value="{{val.qty}}"  />
                            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                        </div>
                        <div class=" size-14 margin-top-3 price" data-price ="{{val.price}}">小计 ¥<strong >{{val.price|formatCurrency}}</strong></div>
                    </div>
</div>
            </li>
            {% endfor %}

        </ul>


    </form>
</div>
{% else%}
<div class="mui-content">
    <div class="mui-content-padded text-center margin-top-40" >
        <a class="mui-icon iconfont icon-goodsfill size-60 " style="width:100px;height: 100px;padding: 20px" ></a>
    </div>

    <div class="mui-content-padded" >
        <h4 class=" text-center">购物车空空的哦~</h4>
        <p class=" text-center">
            {% if controller.is_login %}
            去看看心仪的商品吧~
            {%else%}
            登录后将显示您之前加入的商品
            {% endif%}

        </p>
    </div>
    <div class="mui-content-padded">
        <p><a class="mui-btn mui-btn-danger mui-btn-block " href="/index"  >去购物</a></p>
        {% if controller.is_login %}
        {%else%}
        <p><a class="mui-btn mui-btn-block mui-btn-outlined "  href="/center/public/login"  >登录</a></p>
        {% endif%}
    </div>
    </div>
{%endif%}
{% endblock%}

{% block script %}
<script>
    //购物车

        $(".sendfrom").on('tap',function () {
            //alert(1)
            if($('form.form-cart').serializeArray().length ==0){
                mui.toast("至少选择一个商品!");
                return false;
            }
            $('form.form-cart').submit();
        });
    /**
     * 将数值四舍五入(保留2位小数)后格式化成金额形式
     *
     * @param num 数值(Number或者String)
     * @return 金额格式的字符串,如'1,234,567.45'
     * @type String
     */
    /*global formatCurrency */
    var formatCurrency = function(num) {
        num = num.toString().replace(/\$|\,/g, '');
        if (isNaN(num))
            num = "0";
        var sign = (num == (num = Math.abs(num)));
        num = Math.floor(num * 100 + 0.50000000001);
        var cents = num % 100;
        num = Math.floor(num / 100).toString();
        if (cents < 10)
            cents = "0" + cents;
        for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
            num = num.substring(0, num.length - (4 * i + 3)) + ',' +
                    num.substring(num.length - (4 * i + 3));
        return (((sign) ? '' : '-') + num + '.' + cents);
    }
    //通缉选中个数
    function tj () {
        var checkd = $('input[name="ids"]');
        var total=0;
        var badgecorner=[];
        var url=[];
        var nums = [];
        $.each(checkd,function (k, v) {
            var c =  $(v).prop("checked");
            console.log($(v).prop("checked"));
            if(c){
                nums.push($(v).parents("li").find("input.number").val());
                total =total + Number($(v).parents("li").find("span.price").attr("data-price"));
                url.push($(v).parents("li").find('input[name="ids"]').data("val"))
                console.log(nums)
            }
            badgecorner.push($(v).parents("li").find("input.number").val());
        })
        //return;
        url = url.join("<>");
        var href;
        if(url.length>0){
            href = "/center/cart/delcart/?ids="+url;
            $("a.delall").attr("href",href);
        }else {
            href = "/center/cart/delcart";
            $("a.delall").attr("href",href);
        }
        if(nums.length > 0){
            $(".nums").html(eval(nums.join("+")));
        }else {
            $(".nums").html(0);
        }

        $("#total").html(formatCurrency(total))
        $("#badge-corner").html(eval(badgecorner.join("+")))
        console.log(href);
    }
    //全选
    $("#checkAll").on('click',function() {
        $('input[name="ids"]').prop("checked",this.checked);
        tj ()

    });
    var $subBox = $("input[name='ids']");
    $subBox.on('click',function(){
        $("#checkAll").prop("checked",$subBox.length == $("input[name='ids']:checked").length ? true : false);
        tj ()

    });

    function steperhtml(step,ids,self) {
        if(step==0){
            mui.toast("数量最少为1");
            return;
        }
        // console.log(step);
        // console.log(ids);
        mui.ajax({
            url:"/center/cart/stepper",
            type:"POST",
            data:{qty:step,ids:ids},
            success:function (res) {
                if(res.errno == 0){
                    $(self).parents("li").find("span.price").attr("data-price",res.data.data.price)
                    $(self).parents("li").find("span.stock").html('<span class="original">有货</span>')
                    $(self).parents("li").find("span.inform").html('');
                    $(self).parents("li").find("div.price>strong").html(formatCurrency(res.data.data.price));
                    tj ();
                }else {
                    if(res.errmsg == "请先登录"){
                        //location.href="/user/login";
                        mui.openWindow({url:"/center/public/login"})
                    }else {
                        $(self).parents("li").find("span.stock").html('<span class="original">无货</span>')
                    }
                    mui.toast(res.errmsg);
                }

            }
        })
    }
    //编辑数量
    $("input.number").change(function () {
        var step = $(this).val();
        var ids = $(this).parents("li").find("input[name='ids']").val();
        steperhtml(step,ids,this)
    })
    //编辑
    $('button.btn-edit').click(function () {
        var hide = $(this).attr("data-hide");
        if(hide == 1){
            $("div.subinfo,.submit").addClass("softhide");
            $("a.edit").removeClass("softhide");
            $(this).attr("data-hide",0);
            $(this).text("完成")
        }else {
            $("div.subinfo,a.submit").removeClass("softhide");
            $("a.edit").addClass("softhide");
            $(this).attr("data-hide",1);
            $(this).text("编辑")
        }
        $('input[name="ids"],#checkAll').prop("checked",false);
        tj();
    })
    $("a.delall").on('tap',function () {
        //alert(1)
        if($('form.form-cart').serializeArray().length ==0){
            mui.toast("至少选择一个商品!");
            return false;
        }
        mui.openWindow({url: $(this).attr("href")})
    })
</script>
{% endblock %}
